<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品首页</title>
    <script src="../public/js/WebIMConfig.js"></script>
    <script src="../public/js/websdk3.1.4.js"></script>
    <script src="../public/js/vue.js"></script>

    <link rel="stylesheet" type="text/css" href="../public/elementUI/elementUI.css">
    <script src="../public/elementUI/elementUI.js"></script>
    <link href="../public/css/bascis.css" rel="stylesheet" type="text/css" />
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <link href="../public/css/header.css" rel="stylesheet" type="text/css" />
    <link href="../public/css/footer.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="index">
        <div class="header">
            <div class="content">
                <div class="left">
                    <img src="./image/ctrlD.png" width="20px" height="20px">
                    <a href="javascript:void(0);" rel="sidebar" onclick="AddFavorite('全球华人充值第一平台', location.href)">
                        <a style="color: red;"><b>Ctrl+D</b></a> <a>收藏本站</a>
                    </a>
                </div>
                <div class="mid">
                    <a href="#">华人服务商城APP</a>
                </div>
                <div class="right">
                    <!-- 登录 -->
                    <div class="login" v-if="isLogin">
                        <a @click="gotoHome" style="color: #00d7c8;">{{user.email}}</a> | <a @click.stop="logOut">退出</a>
                    </div>
                    <!-- 未登陆 -->
                    <div class="noLogin" v-if="!isLogin">
                        <a @click="gotoLogin">注册</a> | <a @click="gotoLogin">登录</a>
                    </div>

                </div>
            </div>
        </div>
        <div style="height: 40px;"></div>
        <div class="mid-content">
            <!-- 搜索框 -->
            <div class="search">
                <div class="img">
                    <h3><img src="../public/image/logo.png"></h3>
                </div>
                <div class="search-input">
                    <input placeholder="search"><button><i class="el-icon-search"></i></button>
                </div>
            </div>
            <div class="box">
                <div class="menu">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                        @select="handleSelect">
                        <el-menu-item index="1"
                            style="background-color: #00d7c8;border-top-left-radius: 20px;border-top-right-radius: 20px;width: 200px;color: white;font-size: 20px;">
                            首页</el-menu-item>
                            <el-submenu v-for="(item,index) in menuList" :index="index+2+''" :key="index+2">
                                <template #title>{{item.main}}</template>
                                <el-menu-item :index='(index+2)+"-"+(index2+1)' :key='(index+2)+"-"+(index2+1)' v-for="(item2,index2) in item.body" @click="gotoProduct(item2)">{{item2.pname}}</el-menu-item>
                                
                            </el-submenu>
                       
                        <el-menu-item index="8" @click="clickFixed">
                            <template #title>联系客服</template>
                        </el-menu-item>
                    </el-menu>
                    </el-menu>
                </div>
                <!-- 轮播图 -->
                <div class="carousel">
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="item in carousel" :key="item.id">
                            <img :src="item.img">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- 送货 -->
                <div class="send">
                    <ul>
                        <li>
                            <i class="el-icon-position"></i>
                            <div class="cont">
                                <div class="big">全自动发货</div>
                                <div>5-10分钟收货</div>
                            </div>
                        </li>
                        <li>
                            <i class="el-icon-orange"></i>
                            <div class="cont">
                                <div class="big">7X24小时</div>
                                <div>在线10秒应答</div>
                            </div>
                        </li>
                        <li>
                            <i class="el-icon-sell"></i>
                            <div class="cont">
                                <div class="big">安全支付</div>
                                <div>购物无忧</div>
                            </div>
                        </li>
                        <li>
                            <i class="el-icon-bank-card"></i>
                            <div class="cont">
                                <div class="big">行业最低价</div>
                                <div>天天低价</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 热销 -->
                <div class="sell">
                    <div class="title">热销产品推荐</div>
                    <div class="goods">
                        <div class="goods-item" v-for="item in goodsItem" :key="item.img" @click="gotoProduct(item)">
                            <img :src="item.img">
                            <div>{{item.price}}</div>
                            <div>{{item.dol}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <footer>
                <div class="center">
                    <div class="introduce">
                        <div class="logo">
                            <img src="../public/image/logo.png" height="80px">
                        </div>
                        <p>
                            10HKA网站隶属拾小时娱乐有限公司，本公司深耕互联网行业，作为服务平台，10HKA励志服务于全球华人，以“团结、友爱、互助、互信”为公司发展理念。如果您在购物中有任何疑问，请及时联系我们
                        </p>
                        <p><span>QQ:</span>2677950874</p>
                        <p><span>邮箱:</span>2677950874@qq.com</p>
                    </div>
                    <div>
                        <ul>
                            <li>关于我们</li>
                            <li>公司介绍</li>
                            <li>隐私政策</li>
                            <li>条款与条件</li>
                        </ul>
                        <ul>
                            <li>购物指南</li>
                            <li>免费注册</li>
                            <li>购物流程</li>
                            <li>条款与条件</li>
                        </ul>
                        <ul>
                            <li>支付方式</li>
                            <li>支持的货币</li>
                            <li>支付方式</li>
                            <li>Paypal认证</li>
                            <li>Paypal注册</li>
                        </ul>
                        <ul>
                            <li>帮助信息</li>
                            <li>发货流程</li>
                            <li>退款政策</li>
                        </ul>
                    </div>

                </div>
                <div class="my-footer">
                    <p> © 2005-2021 www.okpayka.com 版权所有，并保留所有权利</p>
                    <div>
                        <img src="../public/image/footer/163.jpg" />
                        <img src="../public/image/footer/Apple.jpg" />
                        <img src="../public/image/footer/Booking.jpg" />
                        <img src="../public/image/footer/ctrip.jpg" />
                        <img src="../public/image/footer/PayPal.jpg" />
                    </div>
                </div>

            </footer>

        </div>

        <!-- 固钉 -->

        <div class="fixedChart" @click="clickFixed">
            <el-badge :value="noRead" class="item" :hidden="noRead==0">
                <i class="el-icon-chat-dot-round"></i>
            </el-badge>
        </div>



        <!-- 对话框 -->
        <div class="dialog" v-show="centerDialogVisible">

            <div class="dialog-header">
                <span>
                    <img src="../public/image/small-logo.png">
                </span>
                <span @click="closeDialog"
                    style="float: right;height: 50px;line-height: 50px;margin-right: 20px;font-size: 20px;">
                    <i class="el-icon-close" style="color: white;"></i>
                </span>

            </div>
            <div class="dialog-chart">
                <div v-if="connecting" class="connecting">正在连接客服<i class="el-icon-loading"></i></div>
                <el-scrollbar ref="myScrollbar" style="height: 270px;" :native="false" :noresize="false" tag="section">
                    <div class="messageBox clearfloat" v-for='(item,index) in messageList' :key="index">
                        <!-- 发送 当前用户test1 -->
                        <div v-if="item.to=='admin'" class="message" style="float: right;">
                            <!-- 文字 -->
                            <div v-if="item.ext.isimage==0">{{item.msg}}</div>
                            <!-- 图片 -->
                            <img v-else :src="item.ext.image" style="height: 150px;">
                        </div>
                        <!-- 接收 -->
                        <div v-else class="message" style="float: left;margin-left: 10px;">
                            <!-- 文字 -->
                            <div v-if="item.ext.isimage==0">{{item.data}}</div>
                            <!-- 图片 -->
                            <img v-else :src="item.ext.image" style="height: 150px;">
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="dialog-footer">
                <div class="dialog-footer-header">
                    <i class="upload">
                        <el-popover placement="left" width="300" trigger="click">
                            <!-- 表情包面板 -->
                            <div style="height: 200px;">
                                <el-scrollbar style="height: 200px;" :native="false" :noresize="false" tag="section">
                                    <span v-for="(item,index) in emojiList" :key="index"
                                        style="font-size: 20px;cursor: pointer;" @click="addEmoji(item)">
                                        {{item}}
                                    </span>
                                </el-scrollbar>
                            </div>
                            <img slot="reference" src="./image/smile.png">
                        </el-popover>
                    </i>
                    <el-upload v-if="isShowUpload" class="upload" action="" :on-change="getFile" list-type="picture"
                        :limit="1" :show-file-list="false" :auto-upload="false"><img src="./image/pic.png">
                    </el-upload>
                </div>
                <div class="dialog-footer-input">
                    <textarea type="text" placeholder="请咻咻~" v-model='sendMessage'></textarea>
                </div>
                <div class="dialog-footer-send">
                    <button @click='dialogSend'>发送</button>
                </div>
            </div>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#index',
            data() {
                return {
                    activeIndex: '1',
                    centerDialogVisible: false,
                    messageList: [],
                    sendMessage: '',
                    dialogImageUrl: '',
                    dialogVisible: false,
                    WebIM: '',
                    conn: '',
                    noRead: 0,
                    connecting: true,

                    isShowUpload: true,
                    //轮播图图片
                    carousel: [{
                        id: '1',
                        img: "./image/carousel/1.jpg"
                    },
                    {
                        id: '2',
                        img: "./image/carousel/2.jpg"
                    },
                    {
                        id: '3',
                        img: "./image/carousel/3.jpg"
                    }

                    ],
                    //商品
                    goodsItem: [{
                        img: "../public/image/goods/1.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '少年三国志'
                    },
                    {
                        img: "../public/image/goods/2.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: 'APEX英雄'
                    },
                    {
                        img: "../public/image/goods/3.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '红豆充值'
                    },
                    {
                        img: "../public/image/goods/4.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '花椒直播'
                    },
                    {
                        img: "../public/image/goods/5.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: 'iTunes中国区代充'
                    },
                    {
                        img: "../public/image/goods/6.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '网易加速器'
                    },
                    {
                        img: "../public/image/goods/7.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: 'YY直播'
                    },
                    {
                        img: "../public/image/goods/8.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '新浪微博会员'
                    },
                    {
                        img: "../public/image/goods/9.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '快手直播'
                    },
                    {
                        img: "../public/image/goods/10.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '斗鱼直播'
                    },
                    {
                        img: "../public/image/goods/11.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '红豆充值'
                    },
                    {
                        img: "../public/image/goods/12.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '映客直播'
                    },
                    {
                        img: "../public/image/goods/13.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '抖音直播'
                    },
                    {
                        img: "../public/image/goods/14.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '万能充值链接'
                    },
                    {
                        img: "../public/image/goods/15.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '虎牙直播'
                    },
                    {
                        img: "../public/image/goods/16.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '网易通用点数'
                    },
                    {
                        img: "../public/image/goods/17.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '喜点充值'
                    },
                    {
                        img: "../public/image/goods/18.jpg",
                        price: "500元宝",
                        dol: "USD$ 8.64",
                        pname: '全民K歌'
                    }

                    ],
                    isLogin: false, //是否登录
                    user: null, //登录的用户信息
                    emojiList: [],
                    //菜单列表
                    menuList: [
                        {
                            main: "直播平台",
                            body: [
                                {
                                    img: "../public/image/goods/13.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '抖音短视频'
                                },
                                {
                                    img: "../public/image/goods/20.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'YY直播'
                                },
                                {
                                    img: "../public/image/goods/9.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '快手直播'
                                },
                                {
                                    img: "../public/image/goods/15.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '虎牙直播'
                                },
                                {
                                    img: "../public/image/goods/4.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '花椒直播'
                                },
                                {
                                    img: "../public/image/goods/10.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '斗鱼直播'
                                }
                            ]
                        },
                        {
                            main: "视频音频",
                            body: [
                                {
                                    img: "../public/image/goods/21.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '猫耳FM'
                                },
                                {
                                    img: "../public/image/goods/18.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '全民K歌'
                                },
                                {
                                    img: "../public/image/goods/22.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'bilibili'
                                },
                                {
                                    img: "../public/image/goods/23.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '喜马拉雅'
                                },
                                {
                                    img: "../public/image/goods/24.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '荔枝FM'
                                },
                                {
                                    img: "../public/image/goods/25.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '唱吧'
                                },
                                {
                                    img: "../public/image/goods/26.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '腾讯视频'
                                },
                                {
                                    img: "../public/image/goods/27.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '优酷视频'
                                },
                            ]
                        },
                        {
                            main: "陪玩陪聊",
                            body: [
                                {
                                    img: "../public/image/goods/28.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '比心APP'
                                },
                                {
                                    img: "../public/image/goods/29.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'TT语音'
                                },
                                {
                                    img: "../public/image/goods/30.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '伴伴APP'
                                },
                                {
                                    img: "../public/image/goods/31.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '鱼丸星球'
                                },
                                {
                                    img: "../public/image/goods/32.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '糖糖语音'
                                },
                                {
                                    img: "../public/image/goods/33.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '玩吧APP'
                                },
                                {
                                    img: "../public/image/goods/34.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '点点开黑'
                                },
                                {
                                    img: "../public/image/goods/35.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '氧气语音'
                                },
                            ]
                        },
                        {
                            main: "APP手游",
                            body: [
                                {
                                    img: "../public/image/goods/36.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '荒野行动'
                                },
                                {
                                    img: "../public/image/goods/37.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '光明勇士'
                                },
                                {
                                    img: "../public/image/goods/38.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '六界天辰'
                                },
                                {
                                    img: "../public/image/goods/39.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '倩女幽魂'
                                },
                                {
                                    img: "../public/image/goods/40.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '传说对决'
                                },
                                {
                                    img: "../public/image/goods/41.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '第五人格'
                                },
                                {
                                    img: "../public/image/goods/42.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '盗梦英雄'
                                }
                               
                            ]
                        },
                       
                        {
                            main: "生活服务",
                            body: [
                                {
                                    img: "../public/image/goods/43.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '宽带缴费'
                                },
                                {
                                    img: "../public/image/goods/44.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '水费'
                                },
                                {
                                    img: "../public/image/goods/45.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '电费'
                                },
                                {
                                    img: "../public/image/goods/46.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '燃气费'
                                },
                                {
                                    img: "../public/image/goods/47.png",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '预付卡'
                                },
                                {
                                    img: "../public/image/goods/48.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '京东会员'
                                },
                                {
                                    img: "../public/image/goods/49.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: 'KEEP会员'
                                },
                                {
                                    img: "../public/image/goods/50.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '去哪儿会员'
                                },
                                {
                                    img: "../public/image/goods/51.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '淘宝天猫会员'
                                },
                                {
                                    img: "../public/image/goods/52.jpg",
                                    price: "500元宝",
                                    dol: "USD$ 8.64",
                                    pname: '携程旅游网会员'
                                },
                            ]
                        }
                     
                    ]
                };
            },
            mounted() {
                this.checkLogin()
                this.initWIM()

                //获取json表情文件数据
                this.getEmoji()

                // for (let index = 0; index < 9; index++) { 
                //     console.log("字符串表情",String.fromCodePoint('0x1f60'+index)  );
                // }



            },
            updated: function () {
                this.selfScrollDown()
            },
            methods: {

                //初始化
                initWIM() {
                    /*建立连接*/
                    this.WebIM = websdk;
                    this.WebIM.config = config;
                    this.conn = this.WebIM.conn = new WebIM.connection({
                        appKey: this.WebIM.config.appkey,
                        isHttpDNS: this.WebIM.config.isHttpDNS,
                        isMultiLoginSessions: this.WebIM.config.isMultiLoginSessions,
                        https: this.WebIM.config.https,
                        url: this.WebIM.config.socketServer,
                        apiUrl: this.WebIM.config.restServer,
                        isAutoLogin: this.WebIM.config.isAutoLogin,
                        autoReconnectNumMax: this.WebIM.config.autoReconnectNumMax,
                        autoReconnectInterval: this.WebIM.config.autoReconnectInterval,
                        delivery: this.WebIM.config.delivery,
                        useOwnUploadFun: this.WebIM.config.useOwnUploadFun
                    })
                },

                //去登陆
                gotoLogin() {
                    window.location.href = '../login'
                },

                //去商品页面
                gotoProduct(item) {

                    var tempwindow = window.open('_blank');
                    tempwindow.location = '../product/index.html?' + window.btoa(encodeURI('proInfo=' + JSON
                        .stringify(item)));

                },

                //检查是否登录
                checkLogin() {
                    this.user = JSON.parse(localStorage.getItem('user'))
                    if (this.user !== null) {
                        this.isLogin = true
                    } else {
                        this.isLogin = false
                    }

                },

                //去个人中心
                gotoHome() {
                    window.location.href = '../home'
                },

                //退出登录
                logOut() {
                    localStorage.removeItem('user')
                    this.isLogin = false
                    this.user = null
                },

                //选择导航栏
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },

                //发文字
                dialogSend() {
                    const time = Date.now()

                    const id = Date.now() + Math.round((Math.random() + 1) * 10);
                    var msg = new WebIM.message('txt', id); // 创建文本消息
                    msg.set({
                        msg: this.sendMessage, // 消息内容
                        to: 'admin', // 接收消息对象（用户id）
                        ext: {
                            isimage: 0,
                            image: ''
                        },
                        success: function (id, serverMsgId) {
                            new Audio('../public/music/send.mp3').play();
                            console.log('send private text Success');
                            msgText = msg.body.msg;
                            console.log("时间", Date.now() - time);
                        },
                        fail: function (e) {
                            console.log("Send private text error");
                        }
                    });
                    msg.body.chatType = 'singleChat';
                    this.conn.send(msg.body);
                    this.messageList.push(msg.body)
                    this.sendMessage = ''
                },

                //滚动条置底
                selfScrollDown() {
                    this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
                },

                //图片转码
                getBase64(file) {
                    return new Promise(function (resolve, reject) {
                        let reader = new FileReader();
                        let imgResult = "";
                        reader.readAsDataURL(file);
                        reader.onload = function () {
                            imgResult = reader.result;
                        };
                        reader.onerror = function (error) {
                            reject(error);
                        };
                        reader.onloadend = function () {
                            resolve(imgResult);
                        };
                    });
                },

                //发图片
                getFile(file) {
                    this.isShowUpload = false
                    const id = Date.now() + Math.round((Math.random() + 1) * 10);
                    this.getBase64(file.raw).then(res => {
                        //console.log("图片base64", res)
                        const time = Date.now()
                        var msg = new WebIM.message('txt', id); // 创建文本消息
                        msg.set({
                            msg: '', // 消息内容
                            to: 'admin', // 接收消息对象（用户id）
                            ext: {
                                isimage: 1,
                                image: res
                            },
                            success: function (id, serverMsgId) {
                                new Audio('../public/music/send.mp3').play();
                                console.log('send private text Success');
                                msgText = msg.body.msg;
                                console.log("时间", Date.now() - time);

                            },
                            fail: function (e) {
                                console.log("Send private text error");
                            }
                        });
                        msg.body.chatType = 'singleChat';
                        this.conn.send(msg.body);
                        console.log(msg.body);
                        this.messageList.push(msg.body)
                        this.isShowUpload = true
                    });

                },


                closeDialog() {
                    this.centerDialogVisible = false;
                    this.noRead = 0;
                },
                //点击图钉 登录
                clickFixed() {


                    //判断用户登录
                    if (!this.isLogin) {
                        this.$message({
                            message: '登录享受聊天功能',
                            center: true,
                            type: 'warning',
                            offset: 80
                        });
                    } else {
                        this.centerDialogVisible = true
                        this.noRead = 0

                        //===========================================
                        let options = {
                            apiUrl: this.WebIM.config.apiURL,
                            user: this.user.chatId,
                            pwd: '111111',
                            appKey: this.WebIM.config.appkey,
                            success: function (res) {
                                console.log(res)
                                console.log('成功')
                            },
                            error: function (err) {
                                console.log(err)
                            }
                        };

                        this.conn.open(options);

                        this.conn.listen({
                            onOpened: (message) => { //连接成功回调 
                                console.log('登录成功')
                                this.connecting = false
                            },
                            onTextMessage: (message) => {
                                this.messageList.push(message)
                                new Audio('../public/music/recive.mp3').play();
                                console.log('onTextMessage: ', message);
                                this.noRead++;
                            }, //收到文本消息 
                        })

                    }



                },

                //获取表情包json
                getEmoji() {
                    var url = "../public/emoji/emojiList.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
                    var request = new XMLHttpRequest();
                    request.open("get", url);/*设置请求方法与路径*/
                    request.send(null);/*不发送数据到服务器*/
                    request.onload = () => {/*XHR对象获取到返回信息后执行*/
                        if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
                            var json = JSON.parse(request.responseText);
                            //获取json文件 --->  数组
                            //console.log("json文件",json);
                            this.emojiList = json
                            //console.log("emojiList获取成功",this.emojiList[0].name);                          
                        }
                    }
                },

                //发emoji
                addEmoji(item) {
                    //console.log(item);
                    this.sendMessage += item
                }
            }

        })
    </script>
</body>

</html>